<template>
    <div class="splist">
        <el-form :inline="true" size="large">
            <inp label="分类编号: "></inp>
            <inp label="分类名称: "></inp>
            <but />
        </el-form>
        <tab :head="header1" :foo="tabelsj1">
            <Dialog @subadd="addList1(piniaADD, onlyId)"> + 发布商品</Dialog>
            <!-- tabel按钮 -->
            <template #but="butPorps">
                <Dialog  @subadd="Change(butPorps,onlyId)"  >修改</Dialog>
                <el-button @click="shanChu(butPorps,onlyId)" :id="butPorps.text.id">删除</el-button>
            </template>
        </tab>
    </div>
</template>
<script setup>
import { onMounted, computed, reactive, provide, ref } from "vue"
import { useCounterStore } from "@/pinia/index.js"
import { res } from "@/unit/index.js"
import { useRoute } from 'vue-router'
import { listAll } from "../../api/tabel.js"
import { onlyId } from "../../commonjs/router-tabel-id"
import { loading, Delete,xiugai } from "../../commonjs/index.js"
const store = useCounterStore()
const header1 = [{ key: 'numbe', name: "分类编码" }, { key: 'name', name: "分类名称" }, { key: 'same', name: "排序" }]
//css样式数据
provide("csstable", "margin:15px")


onMounted(() => {
    //表格头和模态框字符
    store.$patch({
        formListName: header1,
    })
    //双向绑定模板
    store.$state.formmodel = { numbe: "", name: "", same: "" }
    //获取初始dom数据
    //初始化dom数据
    const sj = loading(onlyId.value).then(data => {
        tabelsj1.value = data
    })
})

const splist1 = JSON.parse(localStorage.getItem(onlyId.value))
const tabelsj1 = ref([])


//添加表格的数据
const piniaADD = computed(() => {
    return store.spform
})
//添加数据到数据库
function addList1(data, only) {
    listAll(data, "POST", only).then(data => {
        tabelsj1.value.push(data.data)
    })
    store.$state = { spform: {} }
}


//删除函数
function shanChu(sj, onlyid) {
    //第一个参数是当前行的数据，第二个参数是当前router参数
    Delete(sj, onlyid)
        .then(data => {
            tabelsj1.value = data
        })
}

function Change(e,id){
    xiugai(e,id)
    .then(data => {
            tabelsj1.value = data
        })
}


</script>